<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90vw;
        height: 50vh;
      }
      .cube {
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        transform-style: preserve-3d;
        transform: rotateY(0) rotateX(-45deg) rotateZ(-45deg);
        animation: cube 8s linear infinite;
      }
      @keyframes cube {
        0% {
          transform: rotateY(0) rotateX(-45deg) rotateZ(-45deg);
        }
        100% {
          transform: rotateY(360deg) rotateX(-45deg) rotateZ(-45deg);
        }
      }
      .cube :hover {
        animation-play-state: paused;
      }
      .cube .side {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #000000;
        padding: 10px;
        background: rgba(#ffffff, 0.8);
      }
      .cube .side h2 {
        width: 100%;
        height: 100%;
      }
      .cube .side h2 :hover {
        color: #ffffff;
        background: #67c23a;
      }
      .side .edge {
        position: absolute;
        background: #000000;
        z-index: 1;
      }
      .side .edge :hover {
        background: #548af7;
      }
      .edge-top {
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
      }

      .edge-right {
        top: 0;
        right: 0;
        bottom: 0;
        width: 5px;
      }

      .edge-bottom {
        bottom: 0;
        left: 0;
        right: 0;
        height: 5px;
      }

      .edge-left {
        top: 0;
        left: 0;
        bottom: 0;
        width: 5px;
      }
      .cube-front {
        transform: rotateY(0) translateZ(100px);
      }

      .cube-back {
        transform: rotateY(180deg) translateZ(100px);
      }

      .cube-left {
        transform: rotateY(-90deg) translateZ(100px);
      }

      .cube-right {
        transform: rotateY(90deg) translateZ(100px);
      }

      .cube-top {
        transform: rotateX(90deg) translateZ(100px);
      }

      .cube-bottom {
        transform: rotateX(-90deg) translateZ(100px);
      }
    </style>
  </head>

  <body>
    <div id="highlight">
      <div class="wrap">
        <ul class="cube">
          <li class="side" v-for="(item) in cubeList" :key="item.id" :class="item.styleName">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="item.tooltip"
              placement="top-start"
            >
              <h2>{{ item.name }}</h2>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              v-for="(item2) in infoList"
              :key="item2.id"
              :class="item2.className"
              effect="dark"
              :content="item2.content"
              placement="top-start"
            >
              <div class="edge" :class="item2.className"></div>
            </el-tooltip>
          </li>
        </ul>
      </div>
    </div>
    <script>
      const { createApp, ref } = Vue
      const app = createApp({
        setup() {
          const cubeList = ref([
            { id: 0, styleName: 'cube-front', name: '面', tooltip: '正面' },
            { id: 1, styleName: 'cube-back', name: '面', tooltip: '背面' },
            { id: 2, styleName: 'cube-left', name: '面', tooltip: '左侧面' },
            { id: 3, styleName: 'cube-right', name: '面', tooltip: '右侧面' },
            { id: 4, styleName: 'cube-top', name: '面', tooltip: '上顶面' },
            { id: 5, styleName: 'cube-bottom', name: '面', tooltip: '下底面' }
          ])

          const infoList = ref([
            { id: 0, className: 'edge-top', content: '棱' },
            { id: 1, className: 'edge-right', content: '棱' },
            { id: 2, className: 'edge-bottom', content: '棱' },
            { id: 3, className: 'edge-left', content: '棱' }
          ])

          return {
            cubeList,
            infoList
          }
        }
      })
      app.mount('#highlight')
    </script>
  </body>
</html>
